<template>
  <div class="payment">
    <Card>
      <p class="title" slot="title">代付订单</p>

      <i-form ref="form-validate" inline :model="formItem">
        <div style="text-align: right;">
          <Form-item>
            <DatePicker v-model="formItem.startTime" type="datetime" placeholder="开始时间"></DatePicker>
          </Form-item>
          <Form-item>
            <DatePicker v-model="formItem.endTime" type="datetime" placeholder="结束时间"></DatePicker>
          </Form-item>
          <Form-item>
            <i-input v-model="formItem.accountName" placeholder="账号名"></i-input>
          </Form-item>
          <Form-item>
            <i-input v-model="formItem.transfer" placeholder="转账单号"></i-input>
          </Form-item>
          <Form-item>
            <Select placeholder="状态" v-model="formItem.status">
              <Option v-for="(item,index) in option" :key="index" :value="item.value">{{ item.title }}</Option>
            </Select>
          </Form-item>
          <Form-item>
            <Button @click="searchBtn" class="com-btm">
              搜索</Button>
          </Form-item>
        </div>
      </i-form>
      <div style="margin-bottom: 10px;">
        <Button class="com-btm height-36" @click="commit('paid')">
          一键提交(已付款)
        </Button>
        <Button class="com-btm height-36" @click="commit('excel')">
          生成Excel表(受理中)
        </Button>
        <Button class="com-btm height-36" @click="commit('fail')">
          一键提交(转账失败)</Button>
        <Button class="com-btm height-36" @click="commit('tohand')">
          一键提交(受理)</Button>
      </div>
      <div class="record">
        <Row type="flex" justify="start" class="code-row-bg">
          <record-list v-for="(item,index) in recordData" :key="index" :item="item">
          </record-list>
        </Row>
      </div>

      <i-table :columns="allColumns" :data="orderData" ref="selection" @on-selection-change="handleSelectRow()"></i-table>
      <div style="margin-top: 10px;overflow: hidden;">
        <Page ref="page" :current="pageCurrent" style="float: left;" size="small" :total="dataCount" :page-size="pageSize"
          @on-change="changepage" @on-page-size-change="newpagesize" show-total show-sizer show-elevator></Page>
        <Button size="small" class="pageBtn com-btm" @click="goToPage()">跳转</Button>
      </div>
    </Card>
    <Modal v-model="dealModal" :mask-closable="false" class-name="vertical-center-modal" @on-ok="ok('tohand')"
      @on-cancel="cancel" width="20">
      <p slot="header">
        <span>提示</span>
      </p>
      <div style="text-align:center">
        <p class="font-14">
          <span>
            <Icon style="font-size: 35px; color: red;" type="ios-help-circle-outline" />
          </span>
          <!-- -->
          确定要进行受理吗?</p>
      </div>
    </Modal>
    <Modal v-model="commitModal1" :mask-closable="false" class-name="vertical-center-modal" @on-ok="ok('paid')"
      @on-cancel="cancel" width="20">
      <p slot="header">
        <span>提示</span>
      </p>
      <div style="text-align:center">
        <p class="font-14">
          <span>
            <Icon style="font-size: 35px; color: red;" type="ios-help-circle-outline" />
          </span>
          <!-- -->
          请确认已经完成转账?</p>
      </div>
    </Modal>
    <Modal v-model="failModal" :mask-closable="false" class-name="vertical-center-modal" @on-ok="ok('fail')" @on-cancel="cancel"
      width="20">
      <p slot="header">
        <span>请填写转账失败的原因</span>
      </p>
      <div style="text-align:center">
        <!-- <p class="font-14">请确认已经完成转账?</p> -->
        <i-form ref="failForm" :model="failItem" :rules="rule">
          <Form-item prop="text" style="margin-bottom: 0;">
            <input v-model="failItem.text" style="width: 100%;" type="text">
          </Form-item>
        </i-form>
      </div>
    </Modal>
  </div>
</template>

<script>
  const color = {
    0: {
      value: 0,
      color: '#1E9FFF',
      color1: '#FFB800',
    },
    1: {
      value: 1,
      color: '#FFB800',
      color1: '#009688'
    },
    2: {
      value: 2,
      color: '#009688',
      color1: '#009688'
    },
    3: {
      value: 3,
      color: '#FF5722',
      color1: '#009688'
    },
    4: {
      value: 4,
      color: '#d5d5d5',
      color1: '#009688'
    }
  };
  let testData = [{
      id: 18,
      transfer: 'TTT123412345612345612345612345656',
      accountname: '硕硕',
      account: '654321',
      blankname: '农业银行',
      payment: '12',
      procedures: '1',
      deducion: '13',
      isdefault: 0,
      AuthStatus: 0,
      datatime: "2020-02-24 21:55:51"
    },
    {
      id: 18,
      transfer: 'TTT123412345612345612345612345656',
      accountname: '硕硕',
      account: '654321',
      blankname: '农业银行',
      payment: '12',
      procedures: '1',
      deducion: '13',
      isdefault: 1,
      AuthStatus: 1,
      datatime: "2020-02-24 21:55:51"
    },
    {
      id: 18,
      transfer: 'TTT123412345612345612345612345656',
      accountname: '硕硕',
      account: '654321',
      blankname: '农业银行',
      payment: '12',
      procedures: '1',
      deducion: '13',
      AuthStatus: 2,
      datatime: "2020-02-24 21:55:51"
    },
    {
      id: 18,
      transfer: '4649848956y454353498456498',
      accountname: '硕硕',
      account: '654321',
      blankname: '农业银行',
      payment: '12',
      procedures: '1',
      deducion: '13',
      AuthStatus: 3,
      datatime: "2020-02-24 21:55:51"
    },
    {
      id: 18,
      transfer: 'TTT123412345612345612345612345656',
      accountname: '硕硕',
      account: '654321',
      blankname: '农业银行',
      payment: '12',
      procedures: '1',
      deducion: '13',
      AuthStatus: 4,
      datatime: "TTT123412345612345612345612345656"
    }
  ];
  import RecordList from '@/components/record-list/record-list.vue';
  export default {
    name: 'payment_order',
    components: {
      RecordList
    },
    data() {
      return {
        tempData: [],
        // 初始化信息总条数
        dataCount: 0,
        // 每页显示多少条
        pageSize: 5,
        pageCurrent: 1, //当前页
        dealModal: false,
        commitModal1: false,
        failModal: false,
        daifaid: '',
        formItem: {
          startTime: '',
          endTime: '',
          accountName: '',
          transfer: '',
          status: ''
        },
        failItem: {
          text: ''
        },
        rule: {
          text: [{
            required: true,
            message: '必须项不能为空',
            trigger: 'blur'
          }]
        },
        option: [{
          value: '0',
          title: '待处理'
        }, {
          value: '1',
          title: '处理中'
        }, {
          value: '2',
          title: '成功'
        }, {
          value: '3',
          title: '失败'
        }, {
          value: '4',
          title: '回退'
        }, ],
        recordData: [{
            title: '订单数：',
            num: 20,
            color: '#219021'
          },
          {
            title: '待付金额：',
            num: 8902,
            color: '#219021',
            icon: '￥'
          },
          {
            title: '代付费用：',
            num: 18,
            color: '#219021',
            icon: '￥'
          },
          {
            title: '扣减金额：',
            num: 8902,
            color: '#219021',
            icon: '￥'
          }
        ],
        allColumns: [{
            type: 'selection',
            align: 'left',
            width: 50
            // fixed: 'left'
          }, {
            title: '操作',
            align: 'left',
            key: 'action',
            width: 180,
            render: (h, params) => {
              return h("div", [
                h(
                  "Button", {
                    style: {
                      marginRight: "5px",
                      padding: '0 8px',
                      height: '23.8px',
                      borderRadius: '3px',
                      lineHeight: '22.8px',
                      fontSize: '12px'

                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: 'order_details_page'
                        })
                      }
                    }
                  },
                  "详情"
                ),
                h(
                  "Tooltip", {
                    props: {
                      placement: 'top'
                    },
                    style: {
                      marginRight: "5px",
                      backgroundColor: "#009688",
                      color: 'white',
                      padding: '0 8px',
                      height: '22.5px',
                      borderRadius: '3px',
                      lineHeight: '22.5px',
                      fontSize: '12px'
                    },

                  },
                  ["详情",
                    h('div', {
                        slot: 'content',
                        style: {
                          whiteSpace: 'normal'
                        }
                      },
                      "商户ID:20000032" // 气泡内的文字
                    ),
                    h('div', {
                        slot: 'content',
                        style: {
                          whiteSpace: 'normal'
                        }
                      },
                      "账户订单:" + params.row.transfer // 气泡内的文字
                    )
                  ],
                ),
                h(
                  "Button", {
                    style: {
                      backgroundColor: "#009688",
                      color: 'white',
                      border: 'none',
                      padding: '0 8px',
                      height: '22.5px',
                      borderRadius: '3px',
                      lineHeight: '22.5px',
                      fontSize: '12px'
                    },
                    on: {
                      click: () => {
                        this.dealModal = true
                      }
                    }
                  },
                  "受理"
                )
              ]);
            }

          },
          {
            title: '商户ID',
            key: 'id',
            width: 110,
            align: 'left'
          },
          {
            title: '转账单号',
            key: 'transfer',
            width: 160,
            align: 'left'
          },
          {
            title: '账户名',
            key: 'accountname',
            width: 110,
            align: 'left'
          },
          {
            title: '账户',
            key: 'account',
            width: 160,
            align: 'left'
          },
          {
            title: '银行名称',
            key: 'blankname',
            width: 110,
            align: 'left'
          },
          {
            title: '代付金额(元)',
            key: 'payment',
            width: 110,
            align: 'left'
          },
          {
            title: '手续(元)',
            key: 'procedures',
            width: 110,
            align: 'left'
          },
          {
            title: '扣减金额(元)',
            key: 'deducion',
            width: 110,
            align: 'left'
          },
          {
            title: '状态',
            key: 'AuthStatus',
            align: 'left',
            width: 150,
            render: (h, params) => {
              return h("div", [
                h(
                  "tag", {
                    props: {
                      color: this.formatStatus(params.row.AuthStatus, color).color
                    },
                    style: {
                      padding: '0 5px',
                      height: '22px',
                      lineHeight: '22px',
                      fontSize: '12px'
                    },
                  },
                  params.row.AuthStatus == 0 ? "待处理" : params.row.AuthStatus == 1 ? "处理中" :
                  params.row.AuthStatus == 2 ? "成功" : params.row.AuthStatus == 3 ? '失败' : '回退'
                ),
                h(
                  "tag", {
                    props: {
                      color: this.formatStatus(params.row.AuthStatus, color).color1
                    },
                    style: {
                      color: 'white!important',
                      padding: '0 5px',
                      height: '22px',
                      lineHeight: '22px',
                      fontSize: '12px'
                    },
                    nativeOn: {
                      click: () => {}
                    }
                  },
                  params.row.AuthStatus == 0 ? "待受理" : '已受理'
                )
              ]);
            }
          },
          {
            title: '时间',
            key: 'datatime',
            align: 'left',
            minWidth: 180
          }
        ],
        orderData: []
      };
    },
    methods: {
      // 一键提交的操作
      commit(name) {
        // console.log(this.daifaid)
        if (this.daifaid === "") {
          alert('请先选择至少一条记录！')
        } else {
          switch (name) {
            case 'paid':
              this.commitModal1 = true;
              console.log(this.daifaid)
              break;
              // case 'excel':
              //   this.commitModal2 = true;
              //   break;
            case 'fail':
              this.failModal = true;
              console.log(this.daifaid)
              break;
            case 'tohand':
              this.dealModal = true;
              console.log(this.daifaid)
              break;
          }
        }

      },
      // 模态框的取消确认
      ok(type) {
        switch (type) {
          case 'tohand':
            this.$Message.info('Clicked ok');
            break;
          case 'paid':
            this.$Message.info('Clicked ok');
            break;
          case 'fail':
            // console.log("填写失败")
            if (this.failItem.text === '') {
              alert('请输入失败原因')
            } else {
              this.$refs['failForm'].validate((valid) => {
                if (valid) {
                  console.log(this.failItem.text)
                } else {
                  console.log("填写失败")
                }
              })
            }
            break;
        }
      },
      cancel() {
        this.$Message.info('Clicked cancel');
      },
      // 勾选中的数据
      handleSelectRow() {
        //这里是获取点击的这一行的数据，
        const a = this.$refs.selection.getSelection()
        // console.log(a)
        //根据这一条数据，for循环是为了获取它的id
        // 涉及到多条数据的查询，每个id 之间用 ' , ' 隔开
        // 出现的是   1111,2222,3333,4444,
        // 然后在for外面拿一个变量接收这个b
        var b = '';
        for (var i = 0; i < a.length; i++) {
          this.daifaid = a[i].id
          if (a.length > 1) {
            b = this.daifaid + ',' + b
          } else {
            b = this.daifaid
          }
        }
        this.daifaid = b
        // console.log(this.daifaid)
      },
      // 列数据中的操作或者状态需要改变文字或者颜色的方法
      formatStatus(value, status) {
        return status[value] || {
          value: '',
          name: ''
        };
      },
      // 按条件搜索
      searchBtn() {
        this.$refs['form-validate'].validate((valid) => {
          console.log(this.formItem.startTime)
          console.log(this.formItem.transfer)
          if (valid) {
            console.log(this.formItem.accountName)
            this.$Message.success('搜索成功!');
          } else {
            this.$Message.error('搜索失败!');
          }
        })
      },



      // 分页的一系列
      // 获取历史记录信息
      getTestData() {
        // 保存取到的所有数据
        this.tempData = testData;
        this.dataCount = testData.length;
        // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
        if (testData.length < this.pageSize) {
          this.orderData = this.tempData;
        } else {
          this.orderData = this.tempData.slice(0, this.pageSize);
        }
      },
      // 点击切换页面
      changepage(index) {
        //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
        let _start = (index - 1) * this.pageSize;
        //需要显示结束数据的index
        let _end = index * this.pageSize;
        //截取需要显示的数据
        this.orderData = this.tempData.slice(_start, _end);
        //储存当前页
        this.page = index;
      },
      //每页显示的数据条数
      newpagesize(index) {
        let _start = (this.pageCurrent - 1) * index;
        let _end = this.pageCurrent * index;
        this.orderData = this.tempData.slice(_start, _end);
        //实时获取当前需要显示的条数
        this.pageSize = index;
      },
      //点击跳转到输入的页码
      goToPage() {
        let t_value = this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value;
        if (t_value == "") {
          this.$Message.info('请填写页数');
          return false;
        }
        if (t_value <= 0) {
          this.$Message.info('页码不能小于0');
          return false;
        }
        if (t_value > Math.ceil(this.dataCount / this.pageSize)) {
          this.$Message.info('超过总页数，无法跳转');
          // this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value = this.current;
          return false;
        }
        this.pageCurrent = parseInt(t_value);
        this.changepage(this.pageCurrent); //触发分页
      }

    },
    created() {
      this.getTestData();
    }
  };
</script>

<style lang="less">
  @import './payment-order.less';

  .payment .ivu-table-cell {
    white-space: nowrap;
  }
  .payment button+button {
    margin-left: 10px;
  }
  .payment .ivu-tag-text {
    color: #fff;
  }
  .payment .ivu-btn:hover {
    color: #515A6E;
    border-color: green !important;
  }
  .payment .pageBtn {
    float: left;
    margin-left: 10px;
    margin-top: 2px;
    background-color: #009688;
  }

</style>
